<html>
<head>
<script type="text/javascript">
var Width = 300, Height = 300 ;
var element_num ;
var surface ;
var img ;
var electrons ;
var interval ;
var bias ;

function object( o ) {
  var f = object.f, i, len, n, prop ;
  f.prototype = o ;
  n = new f ;
  for( i = 1, len = arguments.length; i < len; i++ )
    for( prop in arguments[ i ] )
      n[ prop ] = arguments[ i ][ prop ] ;
    return n ;
}
object.f = function( ){ } ;

var Electron = {

  x: Width / 2,
  y: Height / 2,

  checkConstraint: function( ) {

    if( this.x > Width )
      this.x = 0 ;
    if( this.x < 0 )
      this.x = Width ;
    if( this.y > Height )
      this.y = 0 ;
    if( this.y < 0 )
      this.y = Height ;

  },

  getRandom: function( ) {
    return parseInt( Math.random( ) * 100 ) ;
  },

  move: function( ) {

    var r = this.getRandom( ) ;

    if( r < 24 - bias )
      this.x-- ;
    else if( r < 49 )
      this.x++ ;
    else if( r < 74 )
      this.y-- ;
    else
      this.y++ ;

    this.checkConstraint( ) ;

  },

  beRandom: function( ) {
    this.x = parseInt( Math.random( ) * Width ) ;
    this.y = parseInt( Math.random( ) * Height ) ;
  },

  display: function( ) {
    surface.drawImage( img, this.x - 1 , this.y - 1) ;
  }

} ;

function init( ) {

  surface = document.getElementById( "canvas" ).getContext( "2d" ) ;
  initBias( ) ;
  initImage( ) ;
  initElectrons( ) ;

}

function initImage( ) {

  stop( ) ;

  if( ! img )
    img = new Image( ) ;
  img.src = document.getElementById( "color" ).value ;

  start( ) ;

}

function update( ) {

  surface.clearRect( 0, 0, Width, Height ) ;

  for( var i = 0; i < element_num; i++ ) {
    var e = electrons[ i ] ;
    e.move( ) ;
    e.display( )
  }

}

function initBias( ) {
  bias = document.getElementById( "bias" ).value ;
}

function initElectrons( ) {

  stop( ) ;

  element_num = document.getElementById( "element_num" ).value ;
  electrons = new Array( ) ;
  for( var i = 0; i < element_num; i++ ) {
    var e = object( Electron ) ;
    electrons.push( e ) ;
  }

  start( ) ;

}

function stop( ) {
  if( interval )
    clearInterval( interval ) ;
}

function start( ) {
  interval = setInterval( update, 1000 / 60 ) ;
}

function beRandom( ) {

  stop( ) ;

  for( var i = 0; i < element_num; i++ )
    electrons[ i ].beRandom( ) ;

  start( ) ;

}

</script>
</head>
<body onLoad="init( )">

<p>
<label>Electrons#</label>
<select id="element_num" name="element_num" onChange="initElectrons( )">
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="50">50</option>
<option value="100" selected>100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</p>

<p>
<label>Color</label>
<select id="color" name="color" onChange="initImage( )">
<option value="black.png" selected>black</option>
<option value="red.png">red</option>
<option value="blue.png">blue</option>
</select>
</p>

<p>
<button type=button onClick="beRandom( )">beRandom</button>
</p>

<p>
<label>Bias</label>
<select id="bias" name="bias" onChange="initBias( )">
<option value="25">+25</option>
<option value="20">+20</option>
<option value="15">+15</option>
<option value="10">+10</option>
<option value="5">+5</option>
<option value="1">+1</option>
<option value="0" selected>0</option>
<option value="-1">-1</option>
<option value="-5">-5</option>
<option value="-10">-10</option>
<option value="-15">-15</option>
<option value="-20">-20</option>
<option value="-25">-25</option>
</select>
</p>

<canvas id="canvas" width="300" height="300" style="border:medium solid 
#000000" />



</body>
</html> 
